<template>
  <div class='box'>
    <div class="body">
      <el-tabs v-model="type" type="card" @tab-click="handleClick">
        <el-tab-pane label="地震预警" name="warning">
          <warning-tabel v-if="type == 'warning'" :type='type' />
        </el-tab-pane>
        <el-tab-pane label="震情速报" name="quickReport">
          <quick-report v-if="type == 'quickReport'" :type='type' />
        </el-tab-pane>
        <el-tab-pane label="其他消息" name="message">
          <message-tabel v-if="type == 'message'" :type='type' />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import warningTabel from './warningTabel.vue';
import quickReport from './quickReport.vue';
import messageTabel from './messageTabel.vue';
export default {
  name: 'earlyWarning',
  components: {
    warningTabel,
    quickReport,
    messageTabel,
  },
  data() {
    return {
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   key: 'warning',
      // },
      type: 'warning',
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  methods: {
    handleClick(tab, event) {},
  },
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 20px;
  // height: 64px;
  .body {
    background: #ffffff;
    // padding: 20px;
    height: 820px;
    border-radius: 5px;
    ::v-deep .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-tabs__content {
      flex: 1;
    }
  }
}
</style>